import React, { Component, ReactNode } from 'react';
import { Form, Button, Tabs } from 'antd';

import MemberInfo from './memberInfo';
import TrsdeDetails from './trsdeDetails';
import LevelAdjustment from './levelAdjustment';

import { StateType } from '../utils';
import styles from '../style.less';

const { TabPane } = Tabs;

class DetailDialog extends Component<StateType> {
  public state = {
    activeKey: '1',
  };

  tabChange = (key: string) => {
    this.setState({ activeKey: key });
  };

  render(): ReactNode {
    const { username, blackTitle } = this.props.data;
    const { activeKey } = this.state;

    return (
      <div className={styles.detailDialog}>
        <h2 className={styles.detailTitle}>
          <div className={styles.titleText}>玩家账号：{username || blackTitle}</div>
          <Button onClick={this.props.close}>关闭</Button>
        </h2>
        <Tabs defaultActiveKey="1" activeKey={activeKey} onChange={this.tabChange}>
          <TabPane tab="会员信息" key="1">
            <MemberInfo data={this.props.data} onTabChange={this.tabChange} />
          </TabPane>
          <TabPane tab="交易明细" key="2">
            <TrsdeDetails data={this.props.data} />
          </TabPane>
          <TabPane tab="层级调整记录" key="3">
            <LevelAdjustment data={this.props.data} />
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

const DetailDialogWrapper = Form.create({ name: 'search-detail' })(DetailDialog);
export default DetailDialogWrapper;
